<!-- 首页分类详情列表 -->
<template>
	<view class="container">
		<view class="header">
			<u-search @custom='selet' v-model="value" @clear="clearvalue" :clearabled='true' :showAction="true"
				actionText="搜索" :animation="true"></u-search>
		</view>
		<view class="other_class">
			<!-- <view class="class_item" @click="showother=true">
				<span>筛选</span>
				<span style="margin-left: 5px;"><u-icon name="arrow-down-fill" color="#646464"
						size="10"></u-icon></span>
			</view> -->
			<view class="" style="width: 200px;" v-if="typeids == 4">
				<u-tabs :list="list" lineWidth="20" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
				    color: '#303133',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				    color: '#606266',
				    transform: 'scale(1)'
				}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="tabclick">
				</u-tabs>
			</view>
		</view>
		<scroll-view scroll-y :style="typeids==4? 'height: calc(100vh - 96px);':'height: calc(100vh - 60px);'"
			@scrolltolower='scrolltolower' :scroll-top='scrollytop' @scroll='scroll'>
			<view class="" style="padding: 0 10px; min-height: calc(100vh - 193px) ;">
				<custom-waterfalls-flow @loaded='imgloader' ref="waterfallsFlowRef" :value="typelist" :column="2"
					imageKey='headImages' :columnSpace="1.5" :seat="2" @wapperClick="messagedetail"
					@imageClick="messagedetail">
					<view class="one_class" v-for="(item,index) in typelist" :key="index" slot="slot{{index}}">
						<view class="info">
							<view class="info_label">
								<view class="two__item">
									{{item.dynamicType==1?'房屋租赁':''}}
									{{item.dynamicType==3?'公司招聘':''}}
									{{item.dynamicType==2?'个人简历':''}}
									{{item.dynamicType==4?'我有好货':''}}
									{{item.dynamicType==6?'社区服务':''}}
									{{item.dynamicType==7?'社区团购':''}}
									{{item.dynamicType==8?'社区公益':''}}
									{{item.dynamicType==9?'教育服务':''}}
									{{item.dynamicType==10?'养老服务':''}}
								</view>
								<!-- <view class="two__item" v-for="obj in item.shoplist" :key="obj.index">
									{{obj}}
								</view> -->
							</view>
							<view class="">
								{{item.groupTitle ? (item.groupTitle.length>8 ? item.groupTitle.substring(0,8)  + ".." : item.groupTitle):''}}
								{{item.topic ? (item.topic.length>8 ? item.topic.substring(0,8)  + ".." : item.topic):''}}
								{{item.jobInterest? (item.jobInterest.length>8 ? item.jobInterest.substring(0,8)  + ".." : item.jobInterest):''}}
								{{item.jobName?(item.jobName.length>8 ? item.jobName.substring(0,8)  + ".." : item.jobName):''}}
								{{item.goodsName?(item.goodsName.length>8 ? item.goodsName.substring(0,8)  + ".." : item.goodsName):''}}
								{{item.activityTitle?(item.activityTitle.length>8 ? item.activityTitle.substring(0,8)  + ".." : item.activityTitle):''}}
								{{item.title?(item.title.length>8 ? item.title.substring(0,8)  + ".." : item.title):''}}
							</view>
							<view class="title_ma" v-if="item.dynamicType==3||item.dynamicType==4||item.dynamicType==2">
								<view class="mabot">
									{{item.salaryRange?(item.salaryRange.length>10? item.salaryRange.substring(0,10)  + ".." : item.salaryRange):''}}
									{{item.goodsPrice? (item.goodsPrice.length>10? item.goodsPrice.substring(0,10)  + ".." : item.goodsPrice):''}}
									{{item.expSalary? (item.expSalary.length>10? item.expSalary.substring(0,10)  + ".." : item.expSalary):''}}
									{{ item.salaryType ? (item.salaryType == 1 ? '/天' : (item.salaryType == 2 ? '/月' : (item.salaryType == 3 ? '/年' : ''))) : '' }}
								</view>
							</view>
							<view class="awatarname">
								<view class="" style="display: flex; align-items: center;">
									<view class="" style="margin-right:5px;">
										<u-avatar :size='20' :src="item.nickUrl" shape="circle"></u-avatar>
									</view>
									<view class="">
										<view class="" style="font-size: 11px; color: #666;">
											{{item.nickName.length>4? item.nickName.substring(0,4)  + ".." : item.nickName}}
										</view>
									</view>
								</view>
								<view class="" style="font-size: 11px; color: #666;">
									{{item.timestr}}
								</view>
							</view>
						</view>
					</view>
				</custom-waterfalls-flow>
				<u-loadmore line :status="status" :loading-text="loadingText" :nomore-text="nomoreText" />
			</view>
		</scroll-view>
		<u-picker :show="showother" @cancel='showother=false' keyName="lable" @close='showother=false'
			:closeOnClickOverlay='true' :columns="list1" @confirm="confirmother"></u-picker>
	</view>
</template>

<script>
	import {
		formatTimeAgo
	} from '../../utils/utils.js'
	import formItem from '../../uni_modules/uview-ui/libs/config/props/formItem';
	export default {
		data() {
			return {
				scrollytop: 0,
				scrollnow: 0,
				imgloaderstate: true,
				listtotal: 1,
				status: 'loadmore',
				loadingText: '努力加载中',
				nomoreText: '没有更多了',
				tabindex: 0, //tab栏切换
				list: [{
					name: '公司招聘',
				}, {
					name: '个人求职',
				}, ],
				lineBg: "",
				value: '',
				typeids: null, //类型标识
				typelist: [],
				query: {
					topicLike: '',
					memberType: '',
					pageNum: 1,
					pageSize: 10,
				},
				list1: [
					[{
						lable: '全部',
						type: ''
					}, {
						lable: '个人发布',
						type: '1'
					}, {
						lable: '商家发布',
						type: '0'
					}, ]
				],
				showother: false, //类型弹框

			};
		},
		mounted() {

		},
		onLoad(options) {
			// 从路由参数中获取传递的值			
			const typeid = decodeURIComponent(options.value);
			this.typeids = typeid
			this.typeif()
		},
		components: {},
		methods: {
			scroll(e) {
				this.scrollnow = e.detail.scrollTop
			},
			imgloader() {
				this.imgloaderstate = true
				// console.log('加载完成');
			},
			tabclick(e) {
				this.scrollytop = this.scrollnow
				this.$nextTick(() => {
					this.scrollytop = 0
				});
				this.tabindex = e.index
				this.$refs.waterfallsFlowRef.refresh();
				this.query.topicLike = ''
				this.typelist = []
				this.imgloaderstate = true
				this.query.pageNum = 1
				this.typeif()
			},
			typeif() {

				if (this.typeids == 6) {
					this.subleaselist()
				} else if (this.typeids == 4) {
					if (this.tabindex == 0) {
						this.recruitlist()
					} else {
						this.resumelist()
					}
				} else if (this.typeids == 2) {
					this.marketlist()
				} else if (this.typeids == 5) {
					this.activitylist()
				} else if (this.typeids == 1) {
					this.buyinglist()
				}else if (this.typeids == 7) {
					this.communitylist()
				}else if (this.typeids == 8) {
					this.educationlist()
				}else if (this.typeids ==9) {
					this.elderlylist()
				}
			},
			scrolltolower() {
				if (this.imgloaderstate) {
					this.query.pageNum++
					this.typeif()

				}

			},
			//教育服务
			educationlist(){
				const that = this
				this.$request(`/education/listByPage`, 'post', this.query).then(
					res => {
						this.imgloaderstate = res.data.data.records.length == 0 ? true : false
						this.status = res.data.data.records.length == 0 || res.data.data.records.length==res.data.data.total? 'nomore' : 'loading'
						this.listtotal = res.data.data.total
						const dataarr = res.data.data.records.map(item => ({
							...item,
							timestr: formatTimeAgo(item.updateTime)
						}));
						this.typelist = this.typelist.concat(dataarr)
					})
			},
			//养老服务
			elderlylist(){
				const that = this
				this.$request(`/elderly/listByPage`, 'post', this.query).then(
					res => {
						this.imgloaderstate = res.data.data.records.length == 0 ? true : false
						this.status = res.data.data.records.length == 0 || res.data.data.records.length==res.data.data.total? 'nomore' : 'loading'
						this.listtotal = res.data.data.total
						const dataarr = res.data.data.records.map(item => ({
							...item,
							timestr: formatTimeAgo(item.updateTime)
						}));
						this.typelist = this.typelist.concat(dataarr)
					})
			},
			//社区团购
			buyinglist() {
				const that = this
				this.$request(`/group/listByPage`, 'post', this.query).then(
					res => {
						this.imgloaderstate = res.data.data.records.length == 0 ? true : false
						this.status = res.data.data.records.length == 0 || res.data.data.records.length==res.data.data.total? 'nomore' : 'loading'
						this.listtotal = res.data.data.total
						const dataarr = res.data.data.records.map(item => ({
							...item,
							timestr: formatTimeAgo(item.updateTime)

						}));
						this.typelist = this.typelist.concat(dataarr)
					})
			},
			//社区公益
			activitylist() {
				const that = this
				this.$request(`/activity/listByPage`, 'post', this.query).then(
					res => {
						this.imgloaderstate = res.data.data.records.length == 0 ? true : false
						this.status = res.data.data.records.length == 0 || res.data.data.records.length==res.data.data.total? 'nomore' : 'loading'
						this.listtotal = res.data.data.total
						const dataarr = res.data.data.records.map(item => ({
							...item,
							timestr: formatTimeAgo(item.updateTime)

						}));
						this.typelist = this.typelist.concat(dataarr)
					})
			},
			//房屋租赁
			subleaselist() {
				const that = this
				this.$request(`/shop/listByPage`, 'post', this.query).then(
					res => {
						this.imgloaderstate = res.data.data.records.length == 0 ? true : false
						this.status = res.data.data.records.length == 0 || res.data.data.records.length==res.data.data.total? 'nomore' : 'loading'
						this.listtotal = res.data.data.total
						const dataarr = res.data.data.records.map(item => ({
							...item,
							shoplist: item.shopLabels == '' ? [] : item.shopLabels.split(","),
							timestr: formatTimeAgo(item.updateTime)

						}));
						this.typelist = this.typelist.concat(dataarr)
					})
			},
			//我有好货
			marketlist() {
				const that = this
				this.$request(`/market/listByPage`, 'post', this.query).then(
					res => {
						this.imgloaderstate = res.data.data.records.length == 0 ? true : false
						this.status = res.data.data.records.length == 0 || res.data.data.records.length==res.data.data.total? 'nomore' : 'loading'
						this.listtotal = res.data.data.total
						const dataarr = res.data.data.records.map(item => ({
							...item,
							timestr: formatTimeAgo(item.updateTime)

						}));
						this.typelist = this.typelist.concat(dataarr)
					})
			},
			// 个人简历
			resumelist() {
				const that = this
				this.$request(`/resume/listByPage`, 'post', this.query).then(
					res => {
						this.imgloaderstate = res.data.data.records.length == 0 ? true : false
						this.status = res.data.data.records.length == 0 || res.data.data.records.length==res.data.data.total? 'nomore' : 'loading'
						this.listtotal = res.data.data.total
						const dataarr = res.data.data.records.map(item => ({
							...item,
							timestr: formatTimeAgo(item.updateTime)
						}));
						this.typelist = this.typelist.concat(dataarr)
					})
			},
			// 公司招聘
			recruitlist() {
				const that = this
				this.$request(`/recruit/listByPage`, 'post', this.query).then(
					res => {
						this.imgloaderstate = res.data.data.records.length == 0 ? true : false
						this.status = res.data.data.records.length == 0 || res.data.data.records.length==res.data.data.total? 'nomore' : 'loading'
						this.listtotal = res.data.data.total
						const dataarr = res.data.data.records.map(item => ({
							...item,
							shoplist: item.companyBenefits == '' ? [] : item.companyBenefits.split(","),
							timestr: formatTimeAgo(item.updateTime)
						}));
						this.typelist = this.typelist.concat(dataarr)
					})
			},
			//社区服务
			communitylist(){
				const that = this
				this.$request(`/sameCity/listByPage`, 'post', this.query).then(
					res => {
						this.imgloaderstate = res.data.data.records.length == 0 ? true : false
						this.status = res.data.data.records.length == 0 || res.data.data.records.length==res.data.data.total? 'nomore' : 'loading'
						this.listtotal = res.data.data.total
						const dataarr = res.data.data.records.map(item => ({
							...item,
							timestr: formatTimeAgo(item.updateTime)
						}));
						this.typelist = this.typelist.concat(dataarr)
					})
			},
			clearvalue() {
				this.value = ''
				this.selet(this.value)
			},
			selet(e) {
				this.scrollytop = this.scrollnow
				this.$nextTick(() => {
					this.scrollytop = 0
				});
				this.query.topicLike = e
				this.imgloaderstate = true
				this.query.pageNum = 1
				this.typelist = []
				this.$refs.waterfallsFlowRef.refresh();
				this.typeif()
			},
			confirmother(e) {
				this.scrollytop = this.scrollnow
				this.$nextTick(() => {
					this.scrollytop = 0
				});
				this.query.memberType = e.value[0].type
				this.imgloaderstate = true
				this.query.pageNum = 1
				this.typelist = []
				this.$refs.waterfallsFlowRef.refresh();
				this.showother = false;
				this.typeif()
			},
			messagedetail(e) {
				const typeUrlMap = {
					1: '/pages/detail/subleasemessage_detail',
					2: '/pages/detail/resumemessage_detail',
					3: '/pages/detail/recruitmessage_detail',
					4: '/pages/detail/marketmessage_detail',
					6: '/pages/detail/communitymessage_detail',
					7: '/pages/detail/buying_detail',
					8: '/pages/detail/activity_detail',
					9: '/pages/detail/education_detail',
					10: '/pages/detail/elderly_detail',
				};

				const url = typeUrlMap[e.dynamicType];
				if (url) {
					uni.navigateTo({
						url: `${url}?typeid=${encodeURIComponent(e.id)}`
					});
				} else {
					console.error('Unknown dynamicType:', e.dynamicType);
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;

		.other_class {
			display: flex;
			align-items: center;
			// height: 33px;
			display: flex;
			width: calc(100% - 30px);
			padding: 5px 15px;

			.class_item {
				padding: 0px 10px;
				background-color: #fff;
				font-size: 12px;
				margin-right: 10px;
				height: 25px;
				line-height: 25px;
				display: flex;
				align-items: center;
			}
		}

		.header {
			height: 50px;
			line-height: 50px;
			text-align: center;
			background-color: #f6f6f6;
			width: 100%;
			position: relative;
			z-index: 1;
			transition: top 0.3s;

			/* 添加过渡效果 */
			::v-deep .u-search {
				width: 85%;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				.u-search__action {
					width: 60px;
					color: #fff;
					margin: 13px;
					height: 34px;
					line-height: 34px;
					border-radius: 10px;
					background: linear-gradient(to right, #fd790e, #fd9630, #fea54f);
				}

				.u-search__content {
					background-color: #fff !important;

					.u-search__content__input {
						background-color: #fff !important;
					}
				}
			}
		}


		::v-deep .column-value .img {
			max-height: 240px;
			min-height: 100px;
		}

		/* 行之间的间隔 */
		.one_class {
			display: inline-block;
			width: 100%;
			margin-bottom: 10px;
			background-color: #fff;
			border-radius: 10px;
			position: relative;

			::v-deep .u-image__image {
				border-top-left-radius: 10px !important;
				border-top-right-radius: 10px !important;
			}

			.info {
				padding: 8px;

				.title_ma {
					margin-bottom: 5px;

					.mabot {
						color: #f3431c;
						font-weight: 600;
						font-size: 17px;
					}
				}

				.info_label {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					font-size: 11px;
					position: absolute;
					background-color: #fbc338;
					top: -20px;
					left: 0px;
					height: 20px;
					padding: 0 5px;
					border-radius: 0 3px 0 0;
					/* 顺序为 top-left top-right bottom-right bottom-left */
					// .two__item {
					// 	margin-bottom: 5px;
					// 	padding: 2px 8px;
					// 	margin-right: 3px;
					// 	border-radius: 10px;
					// 	color: #3072f6;
					// 	background-color: #eaf1fd;
					// }

					// :first-child {
					// 	color: #fff;
					// 	background-color: #3072f6;
					// }
				}

				// .info_label {
				// 	flex-wrap: wrap;
				// 	display: flex;
				// 	align-items: center;
				// 	font-size: 11px;

				// 	.two__item {
				// 		margin-bottom: 5px;
				// 		font-size: 11px;
				// 		padding: 2px 8px;
				// 		margin-right: 3px;
				// 		border-radius: 10px;
				// 		color: #3072f6;
				// 		background-color: #eaf1fd;
				// 	}

				// 	:first-child {
				// 		color: #fff;
				// 		background-color: #3072f6;
				// 	}
				// }

				.awatarname {
					justify-content: space-between;
					margin-top: 5px;
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>